.fl {
  float: left;
}

.fr {
  float: right;
}

/* 为了防止块级元素被浮动影响导致大小为0，专门定义伪类用于清除浮动*/
/* 所有使用该类的元素的之前和之后均清除浮动*/
.clearf:before,
.clearf:after {
  content: " ";
  display: block;
  clear: both;  /* 左右浮动均清除*/
}

.colm-mainfield,
.colm-controlfield,
.colm-deckfield,
.colm-1,
.colm-2,
.colm-3,
.colm-4,
.colm-5,
.colm-6,
.colm-7,
.colm-8,
.colm-9,
.colm-10{
  display: block;
  position: absolute;
  min-height: 1px;
  float: left;
}

.colm-mainfield {
  width: 800px;
}

.colm-controlfield {
  width: 340px;
}

.colm-deckfield {
  width: 164px;
}

.colm-1 {
  width: 10%;
}

.colm-2 {
  width: 20%;
}

.colm-3 {
  width: 30%;
}

.colm-4 {
  width: 40%;
}

.colm-5 {
  width: 50%;
}

.colm-6 {
  width: 60%;
}

.colm-7 {
  width: 70%;
}

.colm-8 {
  width: 80%;
}

.colm-9 {
  width: 90%;
}

.colm-10 {
  width: 100%
}

.height-total {
  height: 800px;
}

.height-1,
.height-2,
.height-3,
.height-4,
.height-5,
.height-6,
.height-7,
.height-8,
.height-9,
.height-10{
  display: block;
  position: relative;
  min-height: 1px;
  float: left;
}

.height-1 {
  height: 10%;
}

.height-2 {
  height: 20%;
}

.height-3 {
  height: 30%;
}

.height-4 {
  height: 40%;
}

.height-5 {
  height: 50%;
}

.height-6 {
  height: 60%;
}

.height-7 {
  height: 70%;
}

.height-8 {
  height: 80%;
}

.height-9 {
  height: 90%;
}

.height-10 {
  height: 100%;
}

.container {
  display: block;
  width: 1920px;
  margin: 0 auto;  /* 左右auto会使内容居中*/
}

/* 顶端标题*/
.header {
  /* background-color: #ADADAD; */
  display: block;
  max-width: 1640px;
  margin: 0 auto;
  height: 60px;
}

/* 卡牌详情及操作按钮区*/
.control-field {
  background-color: rgba(0, 0, 0, 0.4);  /* 设置透明黑色*/
  /*background-color: #CA8EFF;*/
}

.control-field .card-field {
  width: 240px;
  height: 350px;
  margin: 17px 42px;
  padding: 2px 2px;
  border: 2px solid #F0F0F0;
  /* background-color: #C1FFE4; */
}

.control-field .card-field .card {
  width: 240px;
  height: 350px;
}

.control-field .option-button {
  width: 308px;
  height: 390px;
  margin: 10px 10px;
  /* background-color: #C1FFE4;*/
}

.control-field .option-button .button {
  font-family: "Microsoft Yahei";
  text-align: center;
  font-weight: 550;
  float: left;
  margin: 10px 17px;
  width: 120px;
  height: 30px;
}

/* 右卡牌区*/
.rside-field {
  background-color: rgba(0, 0, 0, 0.4);  /* 设置透明黑色*/
  float: left;
  left: 1230px;
  /* background-color: #00DB00; */
}

  /* 右边区域卡槽*/
.rside-field .item {
  display: inline-block;  /* inline使padding margin等只作用于左右, inline-block可作用于上下左右*/
  border: 4px solid #F0F0F0;
  width: 103px;
  height: 150px;
}

.rside-field .deck {  /* 卡组卡槽*/
  margin: 15px 30px;
}

.rside-field .tomb{  /* 墓地卡槽*/
  margin: 0 30px;
}

.rside-field .env {  /* 环境卡卡槽*/
  margin-top: 410px;
  margin-bottom: 30px;
  margin-left: 30px;
  margin-right: 30px;
}

.rside-field .card {
  width: 96px;
  height: 140px;
  margin: 5px 3px;
}

.rside-field .card:hover {
  border: 3px solid #FFFF37;
}

/* 主卡牌区*/
.main-field {
  float: left;
  left: 340px;  /* 左浮动等于controlfield宽度，不然会重合*/
}

.hand-field {
  margin-top: 15px;
  margin-bottom: 15px;
  margin-left: 50px;
  margin-right: 50px;
  background-color: rgba(0, 0, 0, 0.3);
}

.main-field .hand-field .item {
  width: 90px;
  height: 130px;
  margin-left: 5px;
  margin-right: 5px;
  margin-top: 15px;
  margin-bottom: 5px;
  float: left;
}

.main-field .hand-field .item .card {
  width: 83px;
  height: 120px;
  margin: 2px 2px;
}

.main-field .hand-field .item .card:hover {
  margin: 0 0 20px 0;
}

.main-field .hand-field .item .card-selected {
  width: 83px;
  height: 120px;
  margin: 2px 2px;
  border: 2px solid #FFFF37;
}

.main-field .battle-field {
  margin-left: 65px;
  margin-right: 60px;
}

.main-field .battle-field .card-field {
  width: 770px;
  height: 199px;
  border: 2px solid #F0F0F0;
  background-color: rgba(0, 0, 0, 0.6);  /* 设置透明黑色*/
  margin-top: 26px;
  margin-bottom: 26px;
  margin-left: 0px;
  margin-right: 0px;
}

.main-field .battle-field .card-field .item {
  width: 150px;
  height: 96px;
  border: 2px solid #F0F0F0;
  float: left;
}

.main-field .battle-field .card-field .item-selected {
  width: 150px;
  height: 96px;
  border: 2px solid #FFFF37;
  float: left;
}

.main-field .battle-field .card-field .item .card {
  width: 65px;
  height: 94px;
  margin: 1px 40px;
}

.main-field .battle-field .card-field .item .card-attk {
  width: 65px;
  height: 94px;
  margin: 1px 40px;
}

.main-field .battle-field .card-field .item .card-defen {
  width: 65px;
  height: 94px;
  transform: rotate(90deg);
  margin: 1px 40px;
}

.main-field .battle-field .card-field .item .card-back {
  width: 65px;
  height: 94px;
  transform: rotate(90deg);
  margin: 1px 40px;
}

.main-field .battle-field .card-field .item .card-on {  /* 魔法陷阱翻开状态*/
  width: 65px;
  height: 94px;
  margin: 1px 40px;
}

.main-field .battle-field .card-field .item .card-off {  /* 魔法陷阱覆盖状态*/
  width: 65px;
  height: 94px;
  margin: 1px 40px;
}

.main-field .battle-field .card-field .item-selected .card {
  width: 65px;
  height: 94px;
  margin: 1px 40px;
}

.main-field .battle-field .card-field .item-selected .card-attk {
  width: 65px;
  height: 94px;
  margin: 1px 40px;
}

.main-field .battle-field .card-field .item-selected .card-defen {
  width: 65px;
  height: 94px;
  transform: rotate(90deg);
  margin: 1px 40px;
}

.main-field .battle-field .card-field .item-selected .card-back {
  width: 65px;
  height: 94px;
  transform: rotate(90deg);
  margin: 1px 40px;
}

.main-field .battle-field .card-field .item-selected .card-on {  /* 魔法陷阱翻开状态*/
  width: 65px;
  height: 94px;
  margin: 1px 40px;
}

.main-field .battle-field .card-field .item-selected .card-off {  /* 魔法陷阱覆盖状态*/
  width: 65px;
  height: 94px;
  margin: 1px 40px;
}

/* 从牌组/墓地选择卡牌区*/
.card-selection {
  width: 400px; 
  height: 700px; 
  float: right;
  margin-right: 10px;
}

.card-selection .selection-area {
  overflow-y: auto;
  width: 350px;
  height: 400px;
  margin-left: 25px;
  margin-right: 25px;
  background-color: rgba(0, 0, 0, 0.4);
}

.card-selection .selection-area .card {
  width: 96px;
  height: 140px;
  margin-left: 8px; 
  margin-right: 5px;
  margin-top: 3px;
  margin-bottom: 3px;
}

.card-selection .selection-area .card-selected {
  width: 96px;
  height: 140px;
  margin-left: 8px; 
  margin-right: 5px;
  margin-top: 3px;
  margin-bottom: 3px;
  border: 1px solid #FFFF37;
}

.card-selection .button-area {
  width: 350px;
  height: 300px;
  margin-left: 25px;
  margin-right: 25px;
}

.card-selection .button-area .button {
  font-family: "Microsoft Yahei";
  text-align: center;
  font-weight: 550;
  float: left;
  margin-left: 35px;
  margin-right: 15px;
  margin-top: 20px;
  margin-bottom: 5px;
  width: 280px;
  height: 40px;
}


/* 页脚*/
.footer {
  /* background-color: #ADADAD; */
  height: 58px;
}